<script setup>
import {onMounted, ref, watch} from"vue";

//定义属性
const props = defineProps({
// 这里使用 modelValue ，这样就可以在父组件直接使用 v-model 双向绑定
// 如果不写 modelValue ，那么父组件中，就必须使用 v-model:属性名称 绑定数据
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '提示'
  },
  width: {
    type: String,
    default: '40%'
  },
  noFooter: {
    type: Boolean,
    default: false
  }
});

// 定义事件，这里一定要有 update:modelValue 事件，用于通知父组件更新 v-model 的数据
const emits = defineEmits(['update:modelValue', 'close', 'confirm']);

//定义变量
const dialog = ref({
  visible: props.modelValue,
  title: props.title,
  width: props.width,
  noFooter: props.noFooter
});

const style = ref({
  borderRadius: '0'
});


//初始化
onMounted(() => {
  // initialValue();?
})

//监听属性变化
watch(()=> props.modelValue, (newVal)=>{
  initialValue(newVal);
  console.log('dialog.value===>', dialog.value);
}, {deep: true})

//初始化变量值
const initialValue = (visible) => {
  dialog.value.visible = visible || props.modelValue;
  dialog.value.title = props.title;
  dialog.value.width = props.width;
  dialog.value.noFooter = props.noFooter;
};

//关闭事件
const close = () => {
  dialog.value.visible = false;
  // 关闭弹出框的时候，需要通知父组件更新 v-model 绑定的数据
  emits('update:modelValue', false);
  emits('close', false);
};

// 确定事件
const confirm =()=>{
  dialog.value.visible = false;
  // 关闭弹出框的时候，需要通知父组件更新 v-model 绑定的数据
  emits('confirm');
}

</script>

<template>
  <el-dialog v-model="dialog.visible" :title="dialog.title" :width="dialog.width" :close-on-click-modal="false"
             :append-to-body="true" :style="style"
             @close="close">
    <!--  这里是插槽，可以自定义内容  -->
    <slot name="default"></slot>
    <!--  底部插槽，可以自定义，默认显示两个按钮  -->
    <template #footer v-if="!dialog.noFooter">
      <slot name="footer">
        <el-button @click="close" type="warning" :style="style" size="small">取消</el-button>
        <el-button @click="confirm" color="#1D93AB" :style="style" size="small">确定</el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>